<template>
	<div>
		<Row>
			<i-Col span="16" style="padding:0;">
				<!-- 经典书籍板块 -->
				<i-Col span="12">
					<Card style="height:250px" class="book-card">
						<p slot="title" class="card-title">
							<Icon type="ios-book-outline"></Icon>
							Classic book
						</p>
						<ul>
							<li v-for="(item, index) in bookList" :key="index">
								<a :href="item.url" target="_blank">{{ item.name }}</a>
								<span class="rate">
									<!-- 遍历四次，key是循环必备的值 -->
									<Icon type="ios-star" v-for="n in 4" :key="n"></Icon>
									<Icon type="ios-star" v-if="item.rate >= 9.5"></Icon>
									<Icon type="ios-star-half" v-else></Icon>
									{{ item.rate }}
								</span>
							</li>
						</ul>
					</Card>
				</i-Col>
				<!-- 数量统计板块 -->
				<i-Col span="12">
					<Card style="height:250px">
						<p slot="title" class="card-title">
							<Icon type="ios-folder-open-outline" />
							数量统计
						</p>
						<ul class="flex-card">
							<li v-for="(item, i) in statistics" :key="i">
								<div class="fake-card">
									<p style="color:#A6A6A6;line-height:20px;">
										{{ item.title }}
									</p>
									<h1 style="text-align:right;color:#009688">{{ item.sum }}</h1>
								</div>
							</li>
						</ul>
					</Card>
				</i-Col>
				<i-Col span="24">
					<Card>
						<p slot="title" class="card-title">
							<Icon type="ios-pie-outline" />
							用户来源
						</p>
						<div class="box">
							<div class="echart-bar"></div>
						</div>
					</Card>
				</i-Col>
			</i-Col>
			<!-- 当前版本 -->
			<i-Col span="8">
				<Card style="height:300px">
					<p slot="title" class="card-title">
						<Icon type="ios-bonfire-outline" />
						当前版本
					</p>
					<table>
						<tbody>
							<tr>
								<td>当前版本</td>
								<td>v1.0.0 beta</td>
							</tr>
							<tr>
								<td>UI框架</td>
								<td>iView 3.x</td>
							</tr>
							<tr>
								<td>主要特色</td>
								<td>单页面 / 响应式 / 清爽 / 极简</td>
							</tr>
							<tr>
								<td>获取渠道</td>
								<td>
									<Button type="success" size="large">获取授权</Button>
									<br />
									<Button type="error" size="large">立即下载</Button>
								</td>
							</tr>
						</tbody>
					</table>
				</Card>
				<Card style="margin-top:15px;height:400px;">
					<p slot="title" class="card-title">
						<Icon type="ios-pie-outline" />
						学科访问量
					</p>
					<div class="box">
						<div class="echart-pie"></div>
					</div>
				</Card>
			</i-Col>
		</Row>
	</div>
</template>
<script>
import echarts from 'echarts'
import pieData from './pieData'
import barData from './barData'
export default {
	data() {
		return {
			chart_pie: {},
			chart_bar: {},
			bookList: [
				{
					name: 'The Shawshank Redemption',
					url: 'https://movie.douban.com/subject/1292052/',
					rate: 9.6
				},
				{
					name: 'Leon:The Professional',
					url: 'https://movie.douban.com/subject/1295644/',
					rate: 9.4
				},
				{
					name: 'Farewell to My Concubine',
					url: 'https://movie.douban.com/subject/1291546/',
					rate: 9.5
				},
				{
					name: 'Forrest Gump',
					url: 'https://movie.douban.com/subject/1292720/',
					rate: 9.4
				},
				{
					name: 'Life Is Beautiful',
					url: 'https://movie.douban.com/subject/1292063/',
					rate: 9.5
				}
			],
			statistics: [
				{ title: '学科总数', sum: 12 },
				{ title: '基础题库', sum: 9999 },
				{ title: '精选题库', sum: 1 },
				{ title: '当前用户', sum: 1 }
			],
			pieData,
			barData
		}
	},
	mounted() {
		this.chart_pie = echarts.init(document.querySelector('.echart-pie'))
		this.chart_bar = echarts.init(document.querySelector('.echart-bar'))
		this.chart_pie.setOption(this.pieData)
		this.chart_bar.setOption(this.barData)
	}
}
</script>
<style lang="less" scoped>
// 为什么加@ 答：css语法就是这样的，比如定义动画 @keyframes
@import './index.less';
</style>
